<template>
  <div class="">
    <button @click="$router.push('/about')">跳转购物车</button>
    <ul class="nav">
      <li
        v-for="(item, index) in cate"
        :key="item._id"
        :class="{ active: flag == index }"
        @click="change(index, item._id)"
      >
        {{ item.title }}
      </li>
    </ul>

    <div>
      <van-card
        v-for="item in result"
        :key="item._id"
        :price="item.price"
        :title="item.title"
        :thumb="item.pic"
      >
        <template #footer>
          <van-button size="mini" @click="add(item)">加入购物车</van-button>
        </template>
      </van-card>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";
// axios 在vue3中 不能像之前那样挂载为全局方法了 我们在项目中肯定要封装 但是在这里 这个小案例我们不封装 就用最原始的方法直接引入然后使用
export default {
  setup(props, ctx) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const data = reactive({
      cate: [],
      //分类数据
      list: [],
      //列表数据
      flag: 0,
      //点谁的下标
      result: [],
      //筛选后的列表数据
    });

    axios.get("cate.json").then((res) => {
      console.log(res);
      data.cate = res.data.result;
    });
    //获取分类数据

    axios.get("list.json").then((res) => {
      console.log(res);
      data.list = res.data.result;
      change(0, "59f1e1ada1da8b15d42234e9");
      //进入页面拿到数据后执行 change事件 筛选推荐的数据
    });
    //获取列表数据

    const change = (index, _id) => {
      data.flag = index;
      data.result = data.list.filter((item) => item.cid == _id);
    };
    //点击tab进行切换 并且根据cid筛选数据

    const add = (item) => {
      store.commit("add", item);
    };
    //调用vuex中添加购物车的方法
    return { ...toRefs(data), change, add };
  },
};
</script>

<style lang="scss">
.nav {
  width: 100%;
  display: flex;
  height: 40px;
  line-height: 40px;
  li {
    flex: 1;
    text-align: center;
    line-height: 40px;
  }
  .active {
    background: palevioletred;
  }
}
</style>
